<template>
  <vue-scroll class="page-profile" id="affix-container">
    <div class="card-base card-shadow--medium identity" id="boundary">
      <div class="username">
        <span>{{ user.username }}</span>
        <div class="colors-box">
          <div v-for="i in 5" :key="i" :class="{ color: true, active: colorActive }" :style="{ background: color }"></div>
        </div>
      </div>

      <div class="avatar">
        <img :src="user.avatar" alt="" title="点击更换头像" @click="showAvatarDialog" />
      </div>
      <img src="@/assets/images/cover-2.jpg" id="color-thief" class="color-thief" alt="profile cover" />
    </div>

    <div class="card-base card-shadow--medium info bg-white black-text">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="用户信息" name="info">
          <profile-edit :profile="user"></profile-edit>
        </el-tab-pane>
      </el-tabs>
    </div>

    <user-avatar-dialog :dialogvisible.sync="dialogvisible" :avatar="user.avatar"></user-avatar-dialog>
  </vue-scroll>
</template>

<script>
import ColorThief from "color-thief-browser";
import Affix from "@/components/Affix";
import ProfileEdit from "@/components/Profile/ProfileEdit";
import UserAvatarDialog from "@/components/Profile/UserAvatarDialog";
import axios from "axios";
export default {
  name: "Profile",
  data() {
    return {
      colorActive: false,
      color: "white",
      affixEnabled: true,
      activeTab: "info",
      dialogvisible: false,
      user: {
        username: "",
        avatar: "",
      },
      timer: {},
    };
  },
  methods: {
    resizeAffixEnabled() {
      if (window.innerWidth <= 768) {
        this.affixEnabled = false;
      } else {
        this.affixEnabled = true;
      }
    },
    showAvatarDialog() {
      this.dialogvisible = true;
    },
  },
  mounted() {
    var colorThief = new ColorThief();
    this.timer = setTimeout(() => {
      let rgb = colorThief.getColor(document.getElementById("color-thief"));
      this.colorActive = true;
      this.color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
    }, 1000);

    this.resizeAffixEnabled();
    window.addEventListener("resize", this.resizeAffixEnabled);
  },
  created() {
    axios.get("/api/account/userprofile").then((response) => {
      this.user = response.data.data;
      if (this.user.avatar == null) {
        this.user.avatar = "/images/avatar.jpg";
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeAffixEnabled);
    clearTimeout(this.timer);
  },
  components: {
    Affix,
    ProfileEdit,
    UserAvatarDialog,
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/_variables";

.page-profile {
  overflow: auto;

  .identity {
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    height: 200px;

    .username {
      color: #32325d;
      position: absolute;
      width: 100%;
      height: 50px;
      bottom: 75px;
      left: 0;
      right: 0;
      background: #fff;
      line-height: 50px;
      box-sizing: border-box;
      padding-left: 250px;
      font-size: 25px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-shadow: 0 7px 14px 0 rgba(50, 50, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);

      &.affix {
        z-index: 99;
        border-radius: 5px;
      }

      .colors-box {
        height: 50px;
        background: white; //091c2d
        float: right;

        .color {
          width: 50px;
          height: 50px;
          background: white; //091c2d
          float: right;
          transform: skew(-45deg);
          box-shadow: 1px 0px 1px 0px transparent;
          position: relative;
          right: -25px;
          margin-right: -50px;
          transition: margin-right 0.75s;

          &.active {
            margin-right: 0;
          }

          &:nth-child(2) {
            opacity: 0.8;
          }
          &:nth-child(3) {
            opacity: 0.6;
          }
          &:nth-child(4) {
            opacity: 0.4;
          }
          &:nth-child(5) {
            opacity: 0.2;
          }
        }
      }
    }
    .avatar {
      border: 6px solid #fff;
      position: absolute;
      bottom: 10px;
      left: 50px;
      width: 180px;
      height: 180px;
      overflow: hidden;
      border-radius: 50%;
      box-sizing: border-box;
      box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.15);

      img {
        width: 100%;
        cursor: pointer;
        position: relative;
      }
      img:after {
        content: url("../../assets/images/avatar.jpg");
        display: block;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
    }

    .color-thief {
      display: block;
      width: 100px;
      visibility: hidden;
      z-index: -999999;
      position: absolute;
    }
  }

  .info {
    padding: 24px 32px;
  }
}

@media (max-width: 768px) {
  .page-profile {
    .identity {
      height: auto;

      .avatar {
        bottom: inherit;
        top: 10px;
        left: 50%;
        width: 100px;
        margin-left: -50px;
        height: 100px;
        border-width: 3px;
      }

      .username {
        position: inherit;
        padding: 10px;
        margin: 0;
        top: inherit;
        left: inherit;
        z-index: 1;
        right: inherit;
        text-align: center;
        bottom: inherit;
        white-space: inherit;
        line-height: inherit;
        height: auto;
        margin-top: 120px;
        width: 90%;
        margin-left: 5%;
        margin-bottom: 10px;
        border-radius: 50px;

        .colors-box {
          display: none;
        }

        .avatar-small {
          display: none;
        }

        .cover-small {
          display: none;
        }
      }
    }

    .info {
      padding: 8px 16px;
    }
  }
}
</style>

<style lang="scss">
.page-profile {
  .el-tabs:not(.el-tabs--border-card) {
    .el-tabs__item:not(.is-active) {
      color: #32325d;
    }
  }
}
</style>
